import {Component} from 'react'

import { Form, Input, Button,Row ,Col,message} from "antd";
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { validatePass } from "../../utils/validate";
import CodeBtn from '../../components/code/index';
import {register} from '../../api/account';
import CryptoJs from 'crypto-js';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username:'',
      module:'register'
      }
  }
   onFinish =async values => {
     const {username,code,password} = values
     const requestData = {
      username,code,password:CryptoJs.MD5(password).toString()
     }
    const res = await register(requestData)
    const {resCode} = res 
    if(resCode===0 ){
      message.success(res.message)
      // 调整到登录页面--改变父组件值 
      this.props.cut('login')
    }else {
      message.success(res.message)
    }
  }
    // 是否有账号--决定获取验证码是否高亮 
    accountChange=(e,a)=>{
      if(e.target.value){
         this.setState({
           username:e.target.value
         })
      }
     }

  render() { 
    const {cut} = this.props
    const {username,module} = this.state
    return (
      <div>
        <div className="form-header">
      <h4 className="column">注册</h4>
      <span onClick={()=>cut('login')}>登录账号</span>
    </div>
    <div className="form-content">
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true
        }}
        onFinish={this.onFinish}
      >
        <Form.Item  name="username"  rules={[
                { required: true, message: "邮箱不能为空！" },
                { type: "email", message: "邮箱格式不正确" }
              ]}>
          <Input placeholder='账号'  prefix={<UserOutlined className="site-form-item-icon" />}
           onChange={this.accountChange} />
        </Form.Item>
        <Form.Item  name="password" rules={[ {
                  pattern: validatePass(),
                  message: "请输入大于6位小于20位数字+字母"
                }]}>
          <Input placeholder='密码'  prefix={<LockOutlined className="site-form-item-icon" />}/>
        </Form.Item>
        <Form.Item  name="repassword"  rules={[
                { required: true, message: "密码不能为空" },
                ({getFieldValue})=>({
                 validator(rule,value){
                 return value!==getFieldValue('password') ? Promise.reject('请输入相同密码！'):Promise.resolve()
                 }
                })
              ]}>
          <Input placeholder='确认密码'  prefix={<LockOutlined className="site-form-item-icon" />}/>
        </Form.Item>
        <Form.Item  name="code"  rules={[
                { required: true, message: "请输入验证码！" ,len:6}
              ]}>
        <Row gutter={13}>
          <Col span='15'>
             <Input placeholder='验证码' prefix={<LockOutlined className="site-form-item-icon" />}/>
          </Col>
          <Col span='9'>
          <CodeBtn username={username} module={module}></CodeBtn>
          </Col>
        </Row>
        </Form.Item>

      
        <Form.Item >
          <Button type="primary" htmlType="submit" block>
            注册
          </Button>
        </Form.Item>
      </Form>
    </div>
      </div>
    );
  }
}
 
export default LoginForm;